import React from 'react'
import { IChartProps } from '../'
import { ScrollRankingBoard } from '@jiaminghi/data-view-react'

export class Assembly extends React.PureComponent<IChartProps> {
  private getObjectKeys = (object) =>{ //拿到展示的key值
        let keys = [];
        for (let property in object)
            keys.push(property);
        return keys;
    }

  private getObjectValues = (object) => {  //拿到对象集合的value值
      let values = [];
      for (let property in object)
          values.push(object[property]);
      return values;
  }

  public render () {
    const {  data , chartStyles } = this.props
    const { rollingPlate } = chartStyles

    let config ={}
    if(rollingPlate){
      const {  carousels,rowNum,waitTime,unit ,sort} = rollingPlate
      config = {
        rowNum:rowNum,
        waitTime:waitTime,
        carousel:carousels,
        unit:unit,
        sort:sort,
        data:[{
          name: '周口',
          value: 55
        },
        {
          name: '南阳',
          value: 120
        },
        {
          name: '西峡',
          value: 78
        },
        {
          name: '驻马店',
          value: 66
        },
        {
          name: '新乡',
          value: 80
        },
        {
          name: '信阳',
          value: 45
        },
        {
          name: '漯河',
          value: 29
        }],
      }
    }

    let keyLists = [];
    let valueLists = []
    data.map((item,key) => {
      keyLists = this.getObjectKeys(item);
      valueLists.push(this.getObjectValues(item))
    })
    valueLists = valueLists.map((item,index) => {
      return {'name':item[0],'value':item[1]}
    })
    config = {...config,data:valueLists}
    return (
      <div>
          {/* {'测试组件'} */}
          <ScrollRankingBoard 
          config={config} 
          style={{height: (rollingPlate?.height? rollingPlate?.height + 'px':'210px' ),color: (rollingPlate?.color ? rollingPlate?.color :'#ccc' ),minWidth:'300px'}}
          />
      </div>
    )
  }
}

export default Assembly
